<template>
  <div class="toolbox-kafka-topic">
    <template v-if="ready">
      <div class="pd-10">
        <table>
          <thead>
            <tr>
              <th>Topic</th>
              <th width="100px">
                <div style="width: 100px">
                  <div
                    class="tm-link color-grey-3 ft-14 mglr-2"
                    @click="loadTopics()"
                  >
                    <i class="mdi mdi-reload"></i>
                  </div>
                  <div
                    class="tm-link color-green-3 ft-14 mglr-2"
                    @click="toInsert()"
                  >
                    <i class="mdi mdi-plus"></i>
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            <template v-if="topics == null">
              <tr>
                <td colspan="2">
                  <div class="text-center ft-13 pdtb-10">加载中...</div>
                </td>
              </tr>
            </template>
            <template v-else-if="topics.length == 0">
              <tr>
                <td colspan="2">
                  <div class="text-center ft-13 pdtb-10">暂无匹配数据!</div>
                </td>
              </tr>
            </template>
            <template v-else>
              <template v-for="(one, index) in topics">
                <tr :key="index" @click="rowClick(one)">
                  <td>{{ one.name }}</td>
                  <td>
                    <div
                      class="tm-btn color-blue tm-btn-xs"
                      @click="toOpenTopic(one)"
                    >
                      数据
                    </div>
                    <div
                      class="tm-btn color-orange tm-btn-xs"
                      @click="toDelete(one)"
                    >
                      删除
                    </div>
                  </td>
                </tr>
              </template>
            </template>
          </tbody>
        </table>
      </div>
    </template>
  </div>
</template>


<script>
export default {
  components: {},
  props: ["source", "toolboxType", "toolbox", "option", "wrap"],
  data() {
    return {
      ready: false,
      topics: null,
    };
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      this.ready = true;
      this.loadTopics();
    },
    refresh() {
      this.loadTopics();
    },
    rowClick(data) {
      this.rowClickTimeCache = this.rowClickTimeCache || {};
      let nowTime = new Date().getTime();
      let clickTime = this.rowClickTimeCache[data];
      this.rowClickTimeCache[data] = nowTime;
      if (clickTime) {
        let timeout = nowTime - clickTime;
        if (timeout < 300) {
          delete this.rowClickTimeCache[data];
          this.rowDbClick(data);
        }
      }
    },
    rowDbClick(data) {
      this.toOpenTopic(data);
    },
    toOpenTopic(data) {
      let extend = {
        name: data.name,
        title: data.name,
        type: "data",
        topic: data.name,
      };
      this.wrap.openTabByExtend(extend);
    },
    toInsert() {
      let data = {};
      this.wrap.showTopicForm(data, (m) => {
        let flag = this.doInsert(m);
        return flag;
      });
    },
    async doInsert(data) {
      let param = {
        topic: data.topic,
        numPartitions: Number(data.numPartitions),
        replicationFactor: Number(data.replicationFactor),
      };
      let res = await this.wrap.work("createTopic", param);
      if (res.code == 0) {
        await this.loadTopics();
        return true;
      } else {
        return false;
      }
    },
    toDelete(data) {
      let msg = "确认删除";
      msg += "主题[" + data.name + "]";
      msg += "?";
      this.tool
        .confirm(msg)
        .then(async () => {
          this.doDelete(data.name);
        })
        .catch((e) => {});
    },
    async doDelete(topic) {
      let param = {
        topic: topic,
      };
      let res = await this.wrap.work("deleteTopic", param);
      if (res.code == 0) {
        this.tool.success("删除成功!");
        this.loadTopics();
      }
    },
    async loadTopics() {
      this.topics = null;
      let param = {};
      let res = await this.wrap.work("topics", param);
      res.data = res.data || {};
      res.data.topics = res.data.topics || [];
      let topics = [];
      res.data.topics.forEach((one) => {
        let topic = {};
        topic.name = one;

        topics.push(topic);
      });
      this.topics = topics;
    },
  },
  created() {},
  mounted() {
    this.init();
  },
};
</script>

<style>
.toolbox-kafka-topic {
  width: 100%;
  height: 100%;
}
</style>
